<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-01-29 16:46:06
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-15 14:19:40
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\userManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-01-29 16:46:06
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-02 20:54:55
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\userManage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header">
      <a-select
        v-model:value="valueSlect"
        label-in-value
        style="width: 180px; border-radius: 1px !important; margin-right: 80px"
        :options="options"
        @change="handleChange"
      />
      <a-input
        type="text"
        class="search-input"
        placeholder="请输入电话号码"
        v-model:value="phone"
      />
      <SearchOutlined class="search" @click="handleSearch" />
    </div>

    <div class="userTable">
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="obj">
          <div v-if="obj.column.dataIndex === 'todo'">
            <a-popconfirm
              :title="
                obj.record.userStatus === 0 ? '确定启用吗？' : '确定停用吗？'
              "
              ok-text="确定"
              cancel-text="取消"
              @confirm="() => confirm(obj.record.userId)"
              @cancel="cancel"
            >
              <a-button>
                {{ obj.record.userStatus === 0 ? "启用" : "停用" }}
              </a-button>
            </a-popconfirm>
          </div>
          <div v-if="obj.column.dataIndex === 'userStatus'">
            {{ obj.record.userStatus === 0 ? "停用" : "启用" }}
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { getUsers, updataStatus, searchUsers } from "@/service/api.js";

const valueSlect = ref({
  value: 5,
  label: "全部",
});
const options = ref([
  {
    value: 5,
    label: "全部",
  },
  {
    value: 1,
    label: "启用",
  },
  {
    value: 0,
    label: "停用",
  },
]);
const pagination = ref({
  current: 1,
  total: 0,
  pageSize: 10,
  showTotal: (total) => `共 ${total} 条数据`,
  showQuickJumper: true,
});
const dataSource = ref([]);
const columns = ref([
  {
    title: "用户编号",
    dataIndex: "userId",
    align: "center",
  },
  {
    title: "用户名",
    dataIndex: "userName",
    align: "center",
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    align: "center",
  },
  {
    title: "用户状态",
    dataIndex: "userStatus",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "todo",
    align: "center",
  },
]);
const phone = ref("");
const getData = async () => {
  const res = await getUsers({
    pageSize: pagination.value.pageSize,
    pageNumber: pagination.value.current,
  });
  console.log(res);
  dataSource.value = res.data.records;
  pagination.value.total = res.data.total;
};
getData();
//确认改变状态
const confirm = async (userId) => {
  console.log(userId);
  const res = await updataStatus({ userId });
  console.log(res);
  if (res.code === 1) {
    message.success("状态修改成功！");
  } else message.error(res.data);
  getData();
};
//改变页数
const handleTableChange = (pageObj) => {
  // console.log(pageObj);
  pagination.value = pageObj;
  getData();
};
//根据电话查找
const handleSearch = async () => {
  const res = await searchUsers({
    phone: phone.value,
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });
  console.log(res);
  if (res.code === 1) {
    phone.value = "";
    // 重置下拉选项
    valueSlect.value = {
      value: 5,
      label: "全部",
    };
    dataSource.value = res.data.records;
    pagination.value.total = res.total;
  }
};
// 根据状态查找
const handleChange = async (value) => {
  const res = await searchUsers({
    userStatus: value.option.value,
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });

  if (res.code === 1) {
    // 渲染数据
    dataSource.value = res.data.records;
    pagination.value.total = res.total;
    phone.value = "";
  }
};
</script>
<style scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 100%;
  padding: 12px;
  .search-input {
    padding-left: 8px;
    border: none;
    background-color: #dddddd;
    border-radius: 25px;
    float: right;
    width: 200px;
  }
  .search {
    position: relative;
    height: 30px;
    right: 30px;
    top: 8px;
  }
}
</style>
